<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> 
  <link href="../css/bootstrap.min.css" rel="stylesheet" />
  <script src="../js/jquery-3.2.1.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/login.css" type="text/css" media="all"/>
</head>
<style>
	* {
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	    outline: none;
	}
	
	body {
	    background: url(../images/ad1.jpg) no-repeat;
	    background-size: cover;
	    height: 100vh;
	}
	
	.container1 {
	    position: relative;
	    border-radius: 14px;
	    width: 760px;
	    height: 420px;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	
	.main_left,
	.main_right,
	.way {
	    width: 380px;
	    height: 420px;
	    padding: 50px 30px;
	    position: absolute;
	    text-align: center;
	}
	
	h2,
	label {
	    letter-spacing: 20px;
	    text-indent: 20px;
	}
	
	form {
	    padding-top: 25px;
	}
	
	input[type="text"],
	input[type="password"] {
	    display: inline-block;
	    height: 40px;
	    width: 100%;
	    padding: 7px 8px;
	    margin-bottom: 25px;
	    font-size: 16px;
	}
	
	button {
	    margin-top: 25px;
	    width: 160px;
	    height: 40px;
	    letter-spacing: 16px;
	    text-indent: 16px;
	    border-radius: 16px;
	    border: 0;
	    color: #fff;
	    font-size: 16px;
	    background: #0C8687;
	   /* linear-gradient(to right, #5d9960, #0b5e2e); */
	    cursor: pointer;
	}
	
	a {
	    text-decoration: none;
	    color: darkcyan;
	}
	
	.active {
	    background-color: #E9E9E9;
	    border-radius: 14px;
	}
	
	.main_left {
	    transition: all 0.6s ease-in-out;
	}
	
	.other {
	    margin-top: 25px;
	    text-align: center;
	}
	
	.other a:first-child {
	    margin-left: 0;
	}
	
	.other a {
	    margin-left: 35px;
	}
	
	.way {
	    position: absolute;
	    left: 50%;
	    transition: all 0.6s ease-in-out;
	}
	
	.change_way {
	    margin: 115px 80px 140px;
	    position: relative;
	    white-space: nowrap;
	    border-radius: 14px;
	}
	
	.main_right {
	    left: 50%;
	    display: none;
	}
	
	.btn_register {
	    margin-bottom: 10px;
	}
	
	.pull {
	    left: 0;
	}
	
	.dis {
	    display: block;
	}
	
	.hid {
	    display: none;
	}
	.yh{
	    margin-left: 10px;
	    margin-right: 10px;
	}
	input[type=checkbox], input[type=radio] {
	    /* margin: 4px 9px 0px; */
	    margin: 0px 2px 1px 15px;
	    margin-top: 1px\9;
	    line-height: normal;
	}
</style>
<body>
	<!-- 模态框（Modal4）   订单详情-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="width: 40px;"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="gridSystemModalLabel">订单详情</h4>
				</div>
				<div class="modal-body">
					<form action="#" method="post" enctype="multipart/form-data" style="margin-top: 0px;">
						<div class="aui-info info1 info2" style="height: 400px;">
							<div style="margin-bottom: 25px;">
								<span>性别：<select class="form-control sex">
								<option value="男">男</option>
								<option value="女">女</option>
								</select></span>
							</div>
							<div>		
								<span>手机号码：<input type="text"  id='sjhm' class="form-control" value="" /></span>
							</div>	
							<div>
								<span>出生日期：<input type="text" id="born" class="form-control" value="" /></span>
							</div>
							<div>
								<span>邮箱：<input type="text"  id="email" class="form-control" value="" /></span>
							</div>	
							<div>
								<span>家庭地址：<input type="text" id="adrs" class="form-control" value="" /></span>
							</div>
						</div>		
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal"
						style="width: 90px;padding: 0;margin-top: 0;">确定</button>
					<!-- <button type="button" class="btn btn-success addpet" style="width: 90px;">添加</button> -->
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
    <div class="container1">
        <div class="main_left active">
            <h2>登录</h2>
            <form onsubmit="return false" class="form_login">
                <input type="text" id="user" placeholder="用户名">
                <input type="password" id="pwd" name="" placeholder="请输入密码">
                <div style="text-align: left;"><input type="radio" class="yh" name="yh" checked  value="0">用户<input class="yh" type="radio" name="yh" value="1">管理员</div>
                <button class="btn_login">登录</button>
            </form>
           
        </div>
        <div class="way">
            <div class="change_way"><button class="click" onclick="dclick(this)">注册</button></div>
        </div>
        <div class="main_right active">
            <h2>注册</h2>
            <form onsubmit="return false" class="form_register">
                <input type="text" id="zcyh" placeholder="请输入用户名">
                <input type="password" id="pwds"  placeholder="请输入密码">
                <input type="password" id="tpwd"  placeholder="确认密码">
				<a  data-toggle="modal" data-target="#myModal" style="position: absolute;bottom: 85px;right: 30px;">其他信息</a>
                <button class="btn_register">注册</button>
            </form>
        </div>
    </div>
	<script src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			
			//点击注册
			$(".btn_register").click(function(){
				let yh =$("#zcyh").val();
				let pwd  =$("#pwds").val();
				let tpwd =$("#tpwd").val();
				let sex =$(".sex").val();
				let sjhm =$("#sjhm").val();
				let email =$("#email").val();
				let adrs=$("#adrs").val();
				let born=$("#born").val();
				if(yh == ''||pwd==''||tpwd==''){
					alert("注册信息不能为空！");
					return;
				}
				if(sjhm == ''||email==''|| adrs==''){
					alert("注册其他信息不能为空！");
					return;
				}
				if(pwd != tpwd){
					alert("两次密码输入不一致！");
					return;
				}
				//手机格式验证
				var telStr = /^[1]([3-9])[0-9]{9}$/;
				if (!(telStr.test(sjhm))) {
					alert("手机格式不规范！");	
					return;
				}
				//邮箱验证
				var yx = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
				if (!(yx.test(email))) {
					alert("邮箱格式不规范！");
					return;
				}	
				$.post('http://localhost:80/ct/regist',{"username":yh,"pwd":pwd,"sex":sex,"phone":sjhm,"email":email,"adrs":adrs,"born":born},function(res){
					if(res){
						alert("注册成功！");
					}else{			
						alert("注册失败！");		
					}
					location.href='login.html';
				},"json");
			})
			
			//点击登录
			$(".btn_login").click(function(){
				let user = $("#user").val();
				let pwd = $("#pwd").val();
				let type = $("input[name=yh]:checked").val();
				//验证当前用户是否已在线
				$.post('http://localhost:80/ct/useronline',{"username":user,"password":pwd,"isadmin":type},function(r){
					if(r){
						alert("当前用户已在线！");
						$("#user").val("");
						$("#pwd").val("");
						return;
					}else{
						$.post('http://localhost:80/ct/login',{"username":user,"password":pwd,"isadmin":type},function(res){
							console.log(res);
							if(res){
								alert("登录成功！");
								if(type == 0){
									location.href='index.html';				
								}else{
									location.href='usermanager.html';				
								}
										
							}else{			
								alert("用户名或密码错误！");
								location.href='login.html';	
							}
						},"json");
					}
				});			
			})
		})
	</script>
	
    <script>
        var middlePart = document.getElementsByClassName('way')[0];
        var firstPart = document.getElementsByClassName('main_left')[0];
        var finalPart = document.getElementsByClassName('main_right')[0];

        function dclick(e) {
            if (e.textContent == "注册") {
                middlePart.classList.add('pull');
                firstPart.classList.add('hid');
                finalPart.classList.add('dis');
                e.textContent = "登录";
            } else {
                e.textContent = "注册";
                middlePart.classList.remove('pull');
                firstPart.classList.remove('hid');
                finalPart.classList.remove('dis');
            }
        }
  
	</script>
</body>
</html>
